<template>
	<div>
		<main-content
			v-if="pageType === 'i'"
			:tableHeight.sync="tableHeight"
			:otherDependenComponents="otherDependenComponents"
		>
			<template slot="query">
				<el-form
					ref="queryForm"
					:inline="true"
					:model="queryData"
					class="flex-warp-container"
				>
					<el-form-item
						:label="`${$t('common.belong_merchant')}:`"
						class="flex-row-container"
						label-width="77px"
					>
						<merchant-select
							v-model="queryData.merchantId"
						></merchant-select>
					</el-form-item>
					<el-form-item
						label="结算周期:"
						class="flex-row-container"
						label-width="77px"
					>
						<el-date-picker
							v-model="cycleTime"
							:picker-options="pickerOptionsMonth"
							format="yyyy-MM"
							type="monthrange"
							range-separator="-"
							:start-placeholder="$t('common.start_date')"
							:end-placeholder="$t('common.end_date')"
							:clearable="true"
						></el-date-picker>
					</el-form-item>
					<el-form-item
						label="发放时间:"
						class="flex-row-container"
						label-width="77px"
					>
						<el-date-picker
							v-model="payoutTime"
							size="medium"
							:picker-options="pickerShortcut2"
							format="yyyy-MM-dd"
							type="daterange"
							range-separator="-"
							:start-placeholder="$t('common.start_time')"
							:end-placeholder="$t('common.end_time')"
							align="right"
							:clearable="true"
							:default-time="defaultTime"
						></el-date-picker>
					</el-form-item>

					<el-form-item
						class="flex-row-container"
						label-width="77px"
						label="总代账号:"
					>
						<el-input
							v-input="{ name: 'num_alp' }"
							clearable
							v-model="queryData.topProxyName"
							maxlength="11"
							style="width: 180px"
							:placeholder="$t('common.please_enter')"
						/>
					</el-form-item>
					<el-form-item
						label-width="77px"
						label="订单号:"
						class="flex-row-container"
					>
						<el-input
							v-input="{ name: 'num_alp' }"
							clearable
							v-model="queryData.orderNo"
							:placeholder="$t('common.please_enter')"
							style="width: 300px"
						/>
					</el-form-item>

					<el-form-item style="margin-left: 8px">
						<el-button
							type="primary"
							icon="el-icon-search"
							size="medium"
							@click="search"
						>
							{{ $t('common.search') }}
						</el-button>
						<el-button
							icon="el-icon-refresh-left"
							size="medium"
							@click="reset"
						>
							{{ $t('common.reset') }}
						</el-button>
						<el-button
							v-if="hasPermission('90810088')"
							icon="el-icon-download"
							type="warning"
							:disabled="exportBtnLoading"
							:loading="exportBtnLoading"
							size="medium"
							@click="handleExportExcel"
						>
							{{ $t('common.export') }}
						</el-button>
						<el-button
							type="success"
							icon="el-icon-sort"
							:disabled="loading"
							size="medium"
							@click="openColSettings"
						>
							{{ $t('common.row_set') }}
						</el-button>
					</el-form-item>
				</el-form>
			</template>
			<template slot="content">
				<el-table
					v-loading="loading"
					element-loading-spinner="el-icon-loading"
					border
					size="mini"
					class="small-size-table"
					:data="tableData"
					style="width: 100%"
					highlight-current-row
					:header-cell-style="getRowClass"
					:max-height="tableHeight"
					show-summary
					:summary-method="
						(val) => handleRow(val, subSummary, totalSummary)
					"
				>
					<el-table-column
						align="center"
						:label="$t('funds.order_no')"
						min-width="280"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							{{ scope.row.orderNo || '-' }}
						</template>
					</el-table-column>
					<el-table-column
						v-if="tableColumnData[tableColumns.cycleStartEnd]"
						align="center"
						label="结算周期"
						min-width="200"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							{{
								getRebateCycle(
									scope.row.cycleStartDate,
									scope.row.cycleEndDate
								)
							}}
						</template>
					</el-table-column>

					<el-table-column
						v-if="tableColumnData[tableColumns.payoutStatus]"
						align="center"
						label="客户端状态"
						min-width="150"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							{{
								getTypeName(
									scope.row.payoutStatus,
									payoutStatusArr
								) || '-'
							}}
						</template>
					</el-table-column>

					<el-table-column
						v-if="tableColumnData[tableColumns.topProxyName]"
						align="center"
						label="总代账号"
						min-width="150"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							{{ scope.row.topProxyName || '-' }}
						</template>
					</el-table-column>
					<el-table-column
						v-if="tableColumnData[tableColumns.merchantName]"
						align="center"
						label="所属商户"
						min-width="150"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<span>{{ scope.row.merchantName || '-' }}</span>
						</template>
					</el-table-column>
					<el-table-column
						v-if="tableColumnData[tableColumns.accountStatus]"
						align="center"
						label="账号状态"
						min-width="120"
					>
						<template slot-scope="scope">
							<span
								v-if="scope.row.loginLockStatus === 1"
								class="disableRgba"
							>
								{{ $t('common.login_lock_status') }}
							</span>
							<span
								v-if="scope.row.paymentLockStatus === 1"
								class="deleteRgba"
							>
								{{ $t('common.account_lock_status') }}
							</span>
							<span
								v-if="
									scope.row.loginLockStatus === 0 &&
									scope.row.paymentLockStatus === 0
								"
								class="normalRgba"
							>
								{{ $t('common.account_status_normal') }}
							</span>
						</template>
					</el-table-column>
					<el-table-column
						v-if="tableColumnData[tableColumns.windControlName]"
						align="center"
						label="风控层级"
						min-width="120"
					>
						<template slot-scope="scope">
							{{ scope.row.windControlName || '-' }}
						</template>
					</el-table-column>
					<el-table-column
						v-if="
							tableColumnData[tableColumns.otherMemberNetAmount]
						"
						prop="otherMemberNetAmount"
						align="center"
						label="其他场馆会员游戏输赢"
						show-overflow-tooltip
						min-width="200"
					>
						<template slot-scope="scope">
							<p
								:style="
									handleNumberColor(
										scope.row.otherMemberNetAmount
									)
								"
							>
								<el-link
									class="lightBlueColor"
									type="primary"
									@click="memberGameDialogFn(scope.row)"
								>
									{{
										handleTotalNumber(
											'USDT',
											scope.row.otherMemberNetAmount
										)
									}}
								</el-link>
							</p>
						</template>
					</el-table-column>
					<el-table-column
						v-if="
							tableColumnData[
								tableColumns.otherMemberRebateAmount
							]
						"
						prop="otherMemberRebateAmount"
						align="center"
						label="其他场馆会员总返水"
						show-overflow-tooltip
						min-width="200"
					>
						<template slot-scope="scope">
							<p
								:style="
									handleNumberColor(
										scope.row.otherMemberRebateAmount
									)
								"
							>
								<!-- <el-link
									class="lightBlueColor"
									type="primary"
									@click="memberRebateDetailFn(scope.row)"
								> -->
								{{
									handleTotalNumber(
										'USDT',
										scope.row.otherMemberRebateAmount
									)
								}}
								<!-- </el-link> -->
							</p>
						</template>
					</el-table-column>
					<el-table-column
						v-if="
							tableColumnData[
								tableColumns.otherMemberAccountAdjustAmount
							]
						"
						prop="otherMemberAccountAdjustAmount"
						align="center"
						label="会员账户调整"
						show-overflow-tooltip
						min-width="200"
					>
						<template slot-scope="scope">
							<p
								:style="
									handleNumberColor(
										scope.row.otherMemberAccountAdjustAmount
									)
								"
							>
								{{
									handleTotalNumber(
										'USDT',
										scope.row.otherMemberAccountAdjustAmount
									)
								}}
							</p>
						</template>
					</el-table-column>
					<el-table-column
						v-if="tableColumnData[tableColumns.otherProxyNetAmount]"
						prop="otherProxyNetAmount"
						align="center"
						label="其他场馆代理净盈亏"
						show-overflow-tooltip
						min-width="200"
					>
						<template slot-scope="scope">
							<p
								:style="
									handleNumberColor(
										scope.row.otherProxyNetAmount
									)
								"
							>
								<span>
									{{
										handleTotalNumber(
											'USDT',
											scope.row.otherProxyNetAmount
										)
									}}
								</span>
							</p>
						</template>
					</el-table-column>
					<el-table-column
						v-if="tableColumnData[tableColumns.otherCommissionRate]"
						align="center"
						label="其他场馆佣金比例"
						show-overflow-tooltip
						min-width="200"
					>
						<template slot-scope="scope">
							{{
								handlePercentage(scope.row.otherCommissionRate)
							}}
						</template>
					</el-table-column>
					<el-table-column
						v-if="tableColumnData[tableColumns.otherPartsAmount]"
						prop="otherPartsAmount"
						align="center"
						label="其他场馆佣金"
						show-overflow-tooltip
						min-width="200"
					>
						<template slot-scope="scope">
							<p
								:style="
									handleNumberColor(
										scope.row.otherPartsAmount
									)
								"
							>
								<span>
									{{
										handleTotalNumber(
											'USDT',
											scope.row.otherPartsAmount
										)
									}}
								</span>
							</p>
						</template>
					</el-table-column>
					<el-table-column
						v-if="tableColumnData[tableColumns.clubPartsAmount]"
						prop="clubPartsAmount"
						align="center"
						label="德州俱乐部服务费分成"
						show-overflow-tooltip
						min-width="200"
					>
						<template slot-scope="scope">
							<p
								:style="
									handleNumberColor(scope.row.clubPartsAmount)
								"
							>
								<el-link
									class="lightBlueColor"
									type="primary"
									@click="
										servicecCntribuerDialogFn(scope.row)
									"
								>
									{{
										handleTotalNumber(
											'USDT',
											scope.row.clubPartsAmount
										)
									}}
								</el-link>
							</p>
						</template>
					</el-table-column>
					<el-table-column
						v-if="tableColumnData[tableColumns.insurePartsAmount]"
						prop="insurePartsAmount"
						align="center"
						label="德州俱乐部保险分成"
						show-overflow-tooltip
						min-width="200"
					>
						<template slot-scope="scope">
							<p
								:style="
									handleNumberColor(
										scope.row.insurePartsAmount
									)
								"
							>
								<el-link
									class="lightBlueColor"
									type="primary"
									@click="servicecInsureDialogFn(scope.row)"
								>
									{{
										handleTotalNumber(
											'USDT',
											scope.row.insurePartsAmount
										)
									}}
								</el-link>
							</p>
						</template>
					</el-table-column>
					<el-table-column
						v-if="
							tableColumnData[
								tableColumns.clubValueAddedPartsAmount
							]
						"
						prop="clubValueAddedPartsAmount"
						align="center"
						label="德州增值服务消费分成"
						show-overflow-tooltip
						min-width="200"
					>
						<template slot-scope="scope">
							<p
								:style="
									handleNumberColor(
										scope.row.clubValueAddedPartsAmount
									)
								"
							>
								<el-link
									class="lightBlueColor"
									type="primary"
									@click="clubAmountDialogFn(scope.row)"
								>
									{{
										handleTotalNumber(
											'USDT',
											scope.row.clubValueAddedPartsAmount
										)
									}}
								</el-link>
							</p>
						</template>
					</el-table-column>
					<el-table-column
						v-if="tableColumnData[tableColumns.dividendAmount]"
						prop="dividendAmount"
						align="center"
						label="分红"
						show-overflow-tooltip
						min-width="200"
					>
						<template slot-scope="scope">
							{{
								handleTotalNumber(
									'USDT',
									scope.row.dividendAmount
								)
							}}
						</template>
					</el-table-column>
					<el-table-column
						v-if="tableColumnData[tableColumns.lastMonthBalance]"
						prop="lastMonthBalance"
						align="center"
						label="上月结余"
						show-overflow-tooltip
						min-width="200"
					>
						<template slot-scope="scope">
							<p
								:style="
									handleNumberColor(
										scope.row.lastMonthBalance
									)
								"
							>
								<span>
									{{
										handleTotalNumber(
											'USDT',
											scope.row.lastMonthBalance
										)
									}}
								</span>
							</p>
						</template>
					</el-table-column>
					<el-table-column
						v-if="tableColumnData[tableColumns.commissionAmount]"
						prop="commissionAmount"
						align="center"
						label="综合佣金"
						show-overflow-tooltip
						min-width="200"
					>
						<template slot-scope="scope">
							<p
								:style="
									handleNumberColor(
										scope.row.commissionAmount
									)
								"
							>
								<span>
									{{
										handleTotalNumber(
											'USDT',
											scope.row.commissionAmount
										)
									}}
								</span>
							</p>
						</template>
					</el-table-column>
					<el-table-column
						v-if="tableColumnData[tableColumns.payoutTime]"
						align="center"
						label="发放时间"
						width="160"
					>
						<template slot-scope="scope">
							{{ scope.row.payoutTime || '-' }}
						</template>
					</el-table-column>

					<el-table-column
						v-if="tableColumnData[tableColumns.auditDesc]"
						align="center"
						label="备注"
						width="220"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<div v-if="scope.row.audit1Desc">
								<p>
									{{
										$t('funds.fund_audit.audit_text_1')
									}}：{{ scope.row.audit1Desc || '-' }}
								</p>
								<p v-if="scope.row.audit2Desc">
									{{
										$t('funds.fund_audit.audit_text_2')
									}}：{{ scope.row.audit2Desc || '-' }}
								</p>
							</div>
							<span v-else>-</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="auditStep"
						align="center"
						:label="$t('common.actions')"
						min-width="150"
					>
						<template slot-scope="scope">
							<el-button
								v-if="hasPermission('90810075')"
								type="primary"
								size="medium"
								@click="openDetail(scope.row)"
							>
								{{ $t('common.check') }}
							</el-button>
							<span v-else>-</span>
						</template>
					</el-table-column>
				</el-table>
				<!-- 分页 -->
				<el-pagination
					:current-page.sync="pageNum"
					class="pageValue"
					v-show="!!total"
					background
					layout="total, sizes,prev, pager, next, jumper"
					:page-size="pageSize"
					:page-sizes="pageSizes"
					:total="total"
					:pager-count="9"
					@current-change="handleCurrentChange"
					@size-change="handleSizeChange"
				></el-pagination>
			</template>
		</main-content>
		<detail v-else :detail-data="detailData" @goBack="goBack"></detail>
		<el-dialog
			:title="$t('common.row_set')"
			center
			:visible.sync="colSettings.visible"
			width="475px"
			class="setting-div"
		>
			<div>
				<el-link type="primary" class="mb15" @click="clickDel">
					复原缺省
				</el-link>
			</div>
			<div
				v-for="(value, name1) in activityListField"
				:key="name1"
				class="setting-div"
			>
				<el-checkbox v-model="dialogColumnData[name1]">
					{{ name1 }}
				</el-checkbox>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="colSettings.visible = false">
					{{ $t('common.cancel') }}
				</el-button>
				<el-button type="primary" @click="handleOrderList">
					{{ $t('common.submit') }}
				</el-button>
			</div>
		</el-dialog>
		<!-- 会员游戏输赢弹窗 -->
		<MemberGameDialog
			v-if="memberGameDialog"
			:visible.sync="memberGameDialog"
			@handleVisible="memberGameDialog = false"
			:orderNo="orderNo"
		></MemberGameDialog>
		<!-- 会员总返水弹窗 -->
		<MemberRebateDetail
			v-if="memberRebateDialog"
			:visible.sync="memberRebateDialog"
			@handleVisible="memberRebateDialog = false"
			:curData="curData"
		></MemberRebateDetail>
		<!-- 德州俱乐部服务费贡献明细弹窗 -->
		<ServicecCntribuerDialog
			v-if="servicecCntribuerDialog"
			:visible.sync="servicecCntribuerDialog"
			@handleVisible="servicecCntribuerDialog = false"
			:orderNo="orderNo"
		></ServicecCntribuerDialog>
		<!-- 德州俱乐部保险分成弹窗 -->
		<ServiceInsureDialog
			v-if="servicecInsureDialog"
			:visible.sync="servicecInsureDialog"
			@handleVisible="servicecInsureDialog = false"
			:orderNo="orderNo"
		></ServiceInsureDialog>
		<!-- 德州增值服务消费明细弹窗 -->
		<ClubAmountDialog
			v-if="clubAmountDialog"
			:visible.sync="clubAmountDialog"
			@handleVisible="clubAmountDialog = false"
			:orderNo="orderNo"
		></ClubAmountDialog>
	</div>
</template>

<script>
import list from '@/mixins/list'
import summaryList from './components/summaryList'
import { routerNames } from '@/utils/consts'
import dayjs from 'dayjs'
import { tableColumns, activityListField, payoutStatusArr } from './constants'
import MainContent from '@/components/MainContent/index.vue'
import ClubAmountDialog from '@/components/Funds/Commission/clubAmountDialog.vue'
import ServicecCntribuerDialog from '@/components/Funds/Commission/servicecCntribuerDialog.vue'
import ServiceInsureDialog from '@/components/Funds/Commission/serviceInsureDialog.vue'
import MemberGameDialog from '@/components/Funds/Commission/memberGameDialog.vue'
import MemberRebateDetail from '@/components/Funds/Commission/memberRebateDetail.vue'

const end = () => {
  return dayjs().endOf('month')
}
const start = () => {
  return dayjs()
    .subtract(3, 'month')
    .startOf('month')
}

export default {
  name: routerNames.agentDossiersCommissions,
  components: {
    detail: () => import('./components/detail'),
    MainContent,
    ClubAmountDialog,
    ServicecCntribuerDialog,
    ServiceInsureDialog,
    MemberGameDialog,
    MemberRebateDetail
  },
  filters: {
    getTime(value) {
      return dayjs(value).format('YYYY-MM-DD HH:mm:ss')
    }
  },
  mixins: [list, summaryList],
  data() {
    return {
      tableData: [],
      subSummary: {},
      totalSummary: {},
      exportBtnLoading: false,
      curData: {},
      orderNo: '',
      pageType: 'i',
      detailData: {},
      clubAmountDialog: false,
      servicecCntribuerDialog: false,
      servicecInsureDialog: false,
      memberGameDialog: false,
      memberRebateDialog: false,
      tableHeight: 480,
      otherDependenComponents: [],
      queryData: {
        merchantId: undefined,
        orderNo: undefined,
        topProxyName: undefined
      },
      cycleTime: [start(), end()],
      payoutTime: [],
      colSettings: {
        visible: false,
        dialogColumnData: {}
      },
      tableColumns,
      activityListField,
      payoutStatusArr
    }
  },
  computed: {},
  watch: {},
  created() {
    this.initIndexDB('proxyDossiersCommissions', this.activityListField)
  },
  mounted() { },
  methods: {
    openDetail(rowData) {
      this.detailData = rowData
      this.detailData.proxyName = this.detailData.userName
      this.pageType = 'd'
    },
    // 其他游戏场馆会员输赢
    memberGameDialogFn(row) {
      this.orderNo = row.orderNo
      this.memberGameDialog = true
    },
    // 其他场馆会员总返水
    memberRebateDetailFn(row) {
      this.orderNo = row.orderNo
      this.curData = row
      this.memberRebateDialog = true
    },
    // 德州俱乐部服务费分成
    servicecCntribuerDialogFn(row) {
      this.orderNo = row.orderNo
      this.servicecCntribuerDialog = true
    },
    // 德州俱乐部保险分成
    servicecInsureDialogFn(row) {
      this.orderNo = row.orderNo
      this.servicecInsureDialog = true
    },
    // 德州增值服务消费分成
    clubAmountDialogFn(row) {
      this.orderNo = row.orderNo
      this.clubAmountDialog = true
    },
    getRebateCycle(date1, date2) {
      date1 = date1 && dayjs(String(date1)).format('YYYY-MM-DD')
      date2 = date2 && dayjs(String(date2)).format('YYYY-MM-DD')

      if (date1 === date2) {
        return date1 || '-'
      } else {
        return date1 && date2 ? date1 + ' 至 ' + date2 : '-'
      }
    },
    getSearchParams() {
      const cycleTime = this.cycleTime || []
      const payoutTime = this.payoutTime || []
      const params = {
        ...this.queryData,
        payoutTimeStart: payoutTime[0]
          ? dayjs(payoutTime[0]).format('YYYY-MM-DD HH:mm:ss')
          : undefined,
        payoutTimeEnd: payoutTime[1]
          ? dayjs(payoutTime[1]).format('YYYY-MM-DD HH:mm:ss')
          : undefined,
        reportYmStart: cycleTime[0]
          ? dayjs(cycleTime[0])
            .format('YYYY-MM')
            .replace(/\-/g, '')
          : undefined,
        reportYmEnd: cycleTime[0]
          ? dayjs(cycleTime[1])
            .format('YYYY-MM')
            .replace(/\-/g, '')
          : undefined
      }
      Object.keys(params).forEach((key) => {
        if (params[key] === '') {
          params[key] = undefined
        }
      })
      return params
    },
    search() {
      this.pageNum = 1
      this.loadData()
    },
    loadData() {
      this.subSummary = {}
      this.totalSummary = {}
      this.loading = true
      const params = this.getSearchParams()
      this.$api
        .getProxyCommissionProxyRecordList(this.getParams(params))
        .then((res) => {
          const { record, totalRecord, summary } = res.data || {}
          this.loading = false
          this.tableData = record || []
          this.total = totalRecord || 0
          this.subSummary = summary || {}
        })
        .catch(() => {
          this.loading = false
        })
      this.$api
        .getProxyCommissionProxySummary(params)
        .then((res) => {
          this.totalSummary = res.data || {}
        })
        .catch(() => { })
    },
    goBack() {
      this.pageType = 'i'
      this.loadData()
    },
    reset() {
      this.queryData = {
        merchantId: undefined,
        orderNo: undefined,
        topProxyName: undefined
      }
      this.cycleTime = [start(), end()]
      this.payoutTime = []
      this.pageNum = 1
      this.search()
    },
    handleExportExcel() {
      const params = this.getSearchParams()
      this.exportBtnLoading = true
      this.exportExcelPublic({
        api: 'getProxyCommissionProxyRecordExport',
        params
      }).finally(() => {
        this.exportBtnLoading = false
      })
    },
    // 提交列设置数据
    handleOrderList() {
      this.colSettings.visible = false
      this.updateIndexDB()
    },
    // 打开列设置弹框
    openColSettings() {
      this.getIndexDB(this.activityListField)
      this.colSettings.visible = true
    },
    clickDel() {
      const activityListColumn = {}
      Object.keys(this.activityListField).forEach((item) => {
        activityListColumn[item] = true
      })
      this.dialogColumnData = Object.assign({}, activityListColumn)
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .footer_count_row {
	min-height: 50px;
	height: 50%;
	display: flex;
	font-weight: 700;
	padding: 5px 0;
	align-items: center;
	flex-direction: column;
	justify-content: center;
}
::v-deep .footer_count_row_border {
	border-top: 1px solid #ebeef5;
}

::v-deep .el-dialog__header {
	text-align: center;
	color: #909399;
	font-weight: 700;
	border-bottom: 1px solid #00000015;
}
::v-deep .caret-wrapper {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
.divBox {
	display: flex;
	.el-select {
		width: 100px;
	}
}
.data-refresh {
	margin-top: 0;
	padding-bottom: 20px;
	line-height: 28px;
	margin-right: 20px;
}
.grid-content {
	height: 45px;
	line-height: 45px;
	padding: 2px 22px;
	border: 1px solid #ebeef5;
}
.batch-review {
	.el-dialog__title {
		font-weight: 550;
	}
	.el-dialog__body {
		padding: 10px 20px;
	}
	.review-wrapper {
		height: auto;
		display: flex;
		flex-direction: column;
		border: 1px solid rgba(0, 0, 0, 0.164);
		.top {
			border-bottom: 1px solid rgba(0, 0, 0, 0.164);
			.check-details {
				padding: 10px;
				font-size: 15px;
				font-weight: 600;
				span {
					font-size: 12px;
					color: #038eff;
					cursor: pointer;
				}
			}
			.el-row {
				text-align: center;
				.title {
					background-color: rgba(0, 0, 0, 0.08);
					border-top: 1px solid rgba(0, 0, 0, 0.164);
					border-bottom: 1px solid rgba(0, 0, 0, 0.164);
					font-weight: 550;
				}
				.border-right {
					border-right: 1px solid rgba(0, 0, 0, 0.164);
				}

				.el-col {
					height: 40px;
					line-height: 40px;
				}
				.amounts-list {
					border-left: 1px solid rgba(0, 0, 0, 0.164);
					height: auto;
					min-height: 40px;
					padding: 10px 0;
					line-height: 20px;
				}
			}
		}
		.bottom {
			flex: 1;
			.remark-wrapper {
				display: flex;
				height: 100%;
				.left {
					display: flex;
					flex-direction: column;
					text-align: center;
					justify-content: space-around;
					width: 100px;
					border-right: 1px solid rgba(0, 0, 0, 0.164);
					position: relative;
					&::after {
						content: '*';
						color: red;
						position: absolute;
						top: 72px;
						left: 12px;
					}
				}
				.right {
					flex: 1;
					padding: 12px 10px 0px;
				}
			}
		}
	}

	.detail-header {
		.title {
			font-weight: 600;
			font-size: 15px;
		}
		display: flex;
		justify-content: space-between;
		border: 1px solid #ebeef5;
		align-items: center;
		padding: 10px;
	}
	::v-deep .el-table {
		margin-bottom: 10px;
	}
	::v-deep .el-textarea__inner {
		border: 0 none;
	}
	::v-deep .el-form-item__error {
		top: 155px;
	}
	::v-deep .el-table {
		margin-bottom: 10px;
	}
}
::v-deep .el-input-group__prepend {
	width: 110px;
}
.center-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
}
.el-input-number_container {
	display: inline-block;
	position: relative;
	.close_icon {
		position: absolute;
		right: 10px;
		top: 50%;
		transform: translateY(-50%);
		cursor: pointer;
		color: #ccc;
	}
}
</style>
